<template>
  <div class="info_config_page">
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add')" size="small" icon="el-icon-plus" class="add-btn" @click="addCategorys">新增品类</el-button>
    </div>
    <el-table :data="tableData" row-key="id" border :tree-props="{ children: 'children' }">
      <el-table-column align="center" label="展开" width="120" />
      <el-table-column align="center" label="排序" width="80">
        <template slot-scope="scope">
          <span v-if="!$hasMethod('#sort')">{{ scope.row.displayorder }}</span>
          <el-input v-else oninput="value=value.replace(/[^\d]/g,'')" v-model="scope.row.displayorder" maxLength="9" @change="changeSort(scope.row.id, scope.row.displayorder)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" width="150" prop="id" />
      <el-table-column align="center" label="品类名称">
        <template slot-scope="scope">
          <p><span v-if="!scope.row.children" style="margin:0 5px 0 20px;">├─</span>{{ scope.row.name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="180">
        <template slot-scope="scope">
          <el-tag v-if="$hasMethod('#enable')" :type="scope.row.status == 1 ? 'success' : 'danger'">
            {{ scope.row.status == 1 ? '显示' : '隐藏' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="scope">
					<!-- <el-button v-if="scope.row.children && $hasMethod('#enable')" size="mini" type="success" @click="addItemChild(scope.row)">添加子菜单</el-button> -->
          <el-button size="mini" type="success" @click="addItemChild(scope.row)">添加子菜单</el-button>
          <el-button v-if="$hasMethod('#edit')" size="mini" type="primary" @click="editItem(scope.row)">编辑</el-button>
          <!-- @click="$router.push({name:'infoCategoryListAdd',params:{type:'info',editId:scope.row.id}})" -->
          <el-button v-if="$hasMethod('#enable')" size="mini" type="warning" @click="handleEnable(scope.row.id, scope.row.status)">{{ scope.row.status == 1 ? '隐藏' : '显示' }}</el-button>
          <el-button v-if="$hasMethod('#delete')" size="mini" type="danger" @click="removeItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <add-category :parentVisible="parentVisible" :parentForm="parentForm" :dialogTitle="dialogTitle" @submitForm="submitForm" @closeDialog="closeDialog" @setUrl="setUrl" ref="cateForm" />
    <add-child
      :childVisible="childVisible"
      :childForm="childForm"
      :dialogTitle="dialogTitle"
      :firstLevel="firstLevel"
      :rent_list="rent_list"
      :insurance_list="insurance_list"
      :zlb_list="zlb_list"
      :insure_list="insure_list"
      @submitForm="submitChildForm"
      @closeDialog="closeDialog"
      @setUrl="setChileUrl"
    />
  </div>
</template>

<script>
import { categoryList, updateCategory, delCategory, getAlipayCategory } from '@/api/info'
import addCategory from '../list/addCategory'
import addChild from '../list/addChild'
import customPage from '@/components/customPage'
import { getCategoryList,updateCategoryUp,updateCategoryDown,deleteCategory } from '@/api/goods'
export default {
  components: { addCategory, addChild, customPage },
  data() {
    return {
      tableData: [],
      firstLevel: [],
      parentVisible: false,
      childVisible: false,
      dialogTitle: '',
      total: 0,
      parentForm: {
        id: '',
        addType: 'parent',
        parentid: 0,
        name: '',
        image: '',
        link: '',
        enabled: 1,
        displayorder: ''
      },
      childForm: {
        id: '',
        addType: 'children',
        parentid: '',
        name: '',
        image: '',
        link: '',
        enabled: 1,
        displayorder: '',
        rent_category: '',
        // insurance_category: "",
        zlb_class: ''
      },
      rent_list: [],
      insurance_list: [],
      zlb_list: [],
      insure_list: []
    }
  },
  methods: {
    // 列表项删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteCategory({
          id
        }).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					})
          this.getList()
        })
      })
    },
    handleEnable(id, enabled) {
      this.$confirm('确认要修改状态吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
				if(enabled==1){
					updateCategoryDown(id).then(res=>{
						this.$message({
							message: '操作成功',
							type: 'success'
						})
						this.getList()
					})
				}else{
					updateCategoryUp(id).then(res=>{
						this.$message({
							message: '操作成功',
							type: 'success'
						})
						this.getList()
					})
				}
        // let status = enabled === 1 ? 0 : 1
        // updateCategory({
        //   id,
        //   enabled: status
        // }).then(res => {
        //   this.getList()
        // })
      })
    },
    editItem(row) {
      // if (this.$refs.cateForm.$refs.parentForm) {
      //   this.$refs.cateForm.$refs.parentForm.resetFields();
      // }
      let obj = { ...row }
      if (row.parentid === 0) {
        this.dialogTitle = '编辑品类'
        this.parentVisible = true
        this.parentForm = obj
      } else {
        this.dialogTitle = '编辑子菜单'
        this.childVisible = true
				console.log(obj,'123');
        this.childForm = obj
      }
    },
    // 更改排序
    changeSort(id, num) {
      updateCategory({
        id,
        displayorder: num
      }).then(res => {
        this.getList()
      })
    },
    setUrl(val) {
      this.parentForm.image = val
    },
    setChileUrl(val) {
      this.childForm.image = val
    },
    addCategorys() {
      // if (this.$refs.cateForm.$refs.parentForm) {
      //   this.$refs.cateForm.$refs.parentForm.resetFields();
      // }
      // this.$nextTick(() => {
      //   this.$refs.cateForm.$refs.parentForm.resetFields();
      // })
      this.dialogTitle = '新增品类'
      this.parentForm = {
        id: '',
        addType: 'parent',
        parentid: 0,
        name: '',
        image: '',
        link: '',
        enabled: 1,
        displayorder: ''
      }
      this.parentVisible = true
    },
    submitForm(val) {
			console.log(val,'123213213');
      // let firetForm = { ...this.parentForm }
      // let obj = {
      //   id: this.parentForm.id || '',
      //   addType: 'parent',
      //   parentid: 0
      // }
      // if (this.parentForm.id > 0) {
      //   delete firetForm.children
      //   delete obj.addType
      // }
      // firetForm.displayorder = firetForm.displayorder + ''
      // updateCategory({
      //   ...obj, ...firetForm
      // }).then(res => {
      //   this.parentVisible = false
      //   this.getList()
      // })
    },
    submitChildForm(val) {
			console.log(val,'111111111');
      let obj = {
        id: this.childForm.id || '',
        addType: 'children'
      }
      if (obj.id) {
        delete obj.addType
      }
      const params = { ...this.childForm };
      params.displayorder = params.displayorder + ''
      updateCategory({ ...obj, ...params }).then(res => {
        this.childVisible = false
        this.getList()
      })
    },
    addItemChild(row) {
      let pid = row.id
      this.dialogTitle = '添加子菜单'
      this.childForm = {
        id: '',
        addType: 'children',
        parentid: '',
        name: '',
        image: '',
        link: '',
        enabled: 1,
        displayorder: '',
        rent_category: '',
        zlb_class: ''
      }
      this.childForm.enabled = 1
      this.childVisible = true
      this.childForm['parentid'] = pid || ''
    },
    closeDialog() {
      this.parentVisible = false
      this.childVisible = false
    },
    // 获取列表
    getList() {
      const { page, pageSize } = this.$refs.customPage
			const params={
				name:'',
				categoryCreateTime:'',
				page,
				pageSize
			}
      getCategoryList(params).then(res => {
        this.tableData = res.data
        this.total = res.total
        res.data.forEach(item => {
          this.firstLevel.push({
            id: item.id,
            name: item.name
          })
        })
      })
    },
    getSelect() {
      getAlipayCategory().then(res => {
        this.rent_list = res.rent_list
        this.zlb_list = res.zlb_list
        this.insure_list = res.insure_list
      })
    }
  },
  mounted() {
    this.getList()
    // this.getSelect()
  }
}
</script>

<style lang="scss" scoped>
</style>
